<template>
  <div class="learn">
    <!-- 全局组件 -->
    <headed />
    <div>
      <div class="vidobox">
        <video width="100%" height="580" ref="videoPlay" :src="videoURL" controls></video>
      </div>

      <div class="review">
        <a>评论</a>

        <el-button type="text" class="postcomment" @click="open">发布评论</el-button>

      </div>
      <!-- 评论内容 -->
      <div class="reviewbox">
        <ul>
          <li v-for="(item, index) in comment.slice(0, 6)" :key="index">
            <div class="userbox">
              <div class="avatar">
                <img :src="item.uimg" alt="">
              </div>
              <span> {{ item.uname }}</span>
            </div>
            <div class="comments">
              <span>{{ item.content }}</span>
              <span class="left"> {{ item.time.split('T')[0] }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <foot />
  </div>
</template>

<style lang="less" scoped>
.learn {
  margin-top: @rowheight;

  .vidobox {
    width: 100%;
    height: 580px;
    cursor: pointer;
  }

  .review {
    width: 100%;
    height: 80px;
    line-height: 75px;
    border-bottom: 1px solid #c0c0c0;

    &>a {
      float: left;
      margin-left: 50px;
      font-size: 20px;
      font-weight: bold;
    }

    &>.postcomment {
      position: absolute;
      left: 120px;
      margin-top: 18px;
      width: 100px;
      height: 40px;
      line-height: 15px;
      font-weight: normal;
      border-radius: 10px;
      font-size: 16px;
      background-color: #c0c0c0;
    }
  }

  .reviewbox {
    width: 85%;
    margin: 0 auto;

    &>ul {
      padding-top: 30px;

      &>li {
        position: relative;
        height: 200px;
        box-shadow: @shadow;
        border: 1px solid #c0c0c0;
        margin-bottom: @mt;

        // 头像昵称
        .userbox {
          padding-top: 10px;
          padding-left: 20px;
          height: 90px;

          &>.avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;

            &>img {
              width: 100px;
              height: 100px;
              border-radius: 50%;
            }
          }

          &>span {
            position: absolute;
            left: 140px;
            top: 60px;
            width: 200px;
            font-size: 16px;
            text-align: left;
          }
        }

        //评论内容
        .comments {
          height: 100px;

          &>span {
            float: left;
            padding-top: 40px;
            padding-left: 40px;
          }

          &>.left {
            float: right;
            padding-right: 50px;
          }
        }
      }

    }

  }
}
</style>

<script>
module.exports = {
  data() {
    return {
      coursevideo: [],
      videoURL: '',
      comment: [],
      time: '',
      submitcontent: '',
      flag: false,
    }
  },
  methods: {
    //增加评论
    open() {
      this.$prompt('', '发布评论', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{6,}$/,
        inputErrorMessage: '至少输入六个文字'
      }).then(({ value }) => {
        this.submitcontent = value;
        this.$message({
          type: 'success',
          message: '您发布的内容是: ' + value,
        });
        //添加评论
        this.$http.post('http://test.com:3000/comment/addcomment', {
          //用户id
          userid: this.$route.query.userid,
          //课程id
          courseid: this.$route.query.courseid,
          //输入内容
          textcontent: this.submitcontent,
        })
          .then(
            res => {
              res.data;
            }
          )

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  },
  mounted() {
    //获取课程视频
    //已设置   开启项目时在开启
    this.$http.post('http://test.com:3000/learn/coursevideo', { courseid: this.$route.query.courseid })
      .then(
        res => {
          this.coursevideo = res.data;
          this.videoURL = this.coursevideo.cvedio;
        }
      )

    // 获取评论
    this.$http.post('http://test.com:3000/comment/comment', { courseid: this.$route.query.courseid })
      .then(
        res => {
          //新增的评论靠前
          this.comment = res.data;

        }
      )

    //将数据传送给我的选课
    this.$http.post('http://test.com:3000/course/addcourseselection', {
      courseid: this.$route.query.courseid,
      userid: this.$route.query.userid
    })


  }
}
</script>